<!-- 地道风味 -->
<template>
  <view class="pos_r">
    <view class="pos_a">
      <view class="line"></view>
      <view>
        <u-tabs-swiper
          ref="uTabs"
          :list="list"
          :current="current"
          active-color="#1B70AC"
          inactive-color="#999999"
          font-size="32"
          height="80"
          @change="tabsChange"
          :show-bar="false"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <view class="line"></view>
    </view>
    <swiper
      style="height: 2200rpx; width: 100%"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in tabs"
        :key="index"
      >
        <view class="food" v-if="title === '地道风味'">
          <view
            class="food_item"
            v-for="citem in item.child"
            :key="citem.id"
            @click="goFoodDetail"
          >
            <view class="food_img">
              <img :src="citem.src" alt="" />
            </view>
            <view class="food_right">
              <view class="name">{{ citem.name }}</view>
              <view class="intro">{{ citem.intro }}</view>
              <view class="tags">
                <view class="little_food">小吃</view>
                <view class="little_food del_food">美食</view>
              </view>
            </view>
          </view>
        </view>
        <view class="food scenics" v-if="title === '玩转安吉'">
          <view
            class="food_item"
            v-for="citem in item.child"
            :key="citem.id"
            @click="goScenicDetail"
          >
            <view class="food_img">
              <img :src="citem.src" alt="" />
            </view>
            <view class="food_right">
              <view class="name">{{ citem.name }}</view>
              <view class="intro">{{ citem.intro }}</view>
              <view class="tags scenic_tag">
                <view class="scenic_level">景区等级</view>
                <view class="scenic_level net_red">网红打卡</view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: ["list", "tabs", "title"],
  components: {},
  data() {
    return {
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
    };
  },
  computed: {},
  watch: {},
  methods: {
    goScenicDetail() {
      console.log(123);
      this.$u.route("pages/scenicDetail/index");
    },
    goFoodDetail() {
      this.$u.route("pages/foodDetail/index");
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
  },
  mounted() {
    console.log(this.title);
  },
};
</script>
<style lang="scss">
.pos_r {
  .pos_a {
    // position: fixed;
    // width: 100%;
    // top: 100;
    // left: 0;
    // background-color: #fff;
    // z-index: 999;
  }
}
.line {
  height: 4rpx;
  background: #eef0ed;
}
.food {
  // margin-top: 80rpx;
  margin-left: 20rpx;
  width: calc(100% - 40rpx);
  .food_item {
    display: flex;
    padding: 20rpx 0;
    justify-content: space-between;
    border-bottom: 2rpx solid #f3f3f3;
    .food_img {
      width: 230rpx;
      height: 180rpx;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
    .food_right {
      width: 440rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
      }
      .intro {
        font-size: 22rpx;
        font-weight: 500;
        color: #999999;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .tags {
        display: flex;
        .little_food {
          font-size: 20rpx;
          font-weight: 500;
          color: #ffffff;
          width: 60rpx;
          border-radius: 10rpx;
          height: 30rpx;
          margin-right: 20rpx;
          line-height: 30rpx;
          text-align: center;
          background-color: #f2b04f;
        }
        .del_food {
          background-color: #ea6923;
        }
      }
      .scenic_tag {
        .scenic_level {
          width: 120rpx;
          height: 36rpx;
          background: #d6edeb;
          border-radius: 10rpx;
          font-size: 22rpx;
          text-align: center;
          font-family: Source Han Sans CN;
          font-weight: 400;
          margin-right: 24rpx;
          line-height: 36rpx;
          color: #7ab3af;
        }
      }
    }
  }
}
</style>